<template>
  <div class="transition">
    <el-button type="primary" @click="add">ADD</el-button>
    <el-button type="primary" @click="pop">POP</el-button>
    <!-- transition-group 与 transition 的生命周期 以及过渡类名 用法一致-->
    <div class="wrap">
      <transition-group
        tag=""
        enter-active-class="animate__animated animate__flip"
        leave-active-class="animate__animated animate__rotateOutUpRight"
      >
        <div class="item" v-for="(item, index) in list" :key="index">
          {{ item }}
        </div>
      </transition-group>
    </div>
    <br />
    <br />
    <hr />

    <br />
    <p>move-class="move" 平移自定义类名</p>
    <el-button type="primary" @click="cut">打乱重组</el-button>
    <br />
    <br />
    <br />

    <div class="wraps">
      <transition-group tag="ul" move-class="move">
        <li
          class="items"
          v-for="item in sudoku"
          :key="item.id"
          :style="{ color: item.color }"
        >
          {{ item.number }}
        </li>
      </transition-group>
    </div>
    <br />
    <br />
    <h3>数字的过渡</h3>
    <input type="number" v-model="num.current" step="20" />
    <span style="font-size: 30px">{{ num.tweenedNumber.toFixed(2) }}</span>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref, watch } from "vue";
import "animate.css";
import _ from "lodash";
import gsap from "gsap";
const list = reactive<number[]>([1, 2, 3, 4, 5, 6, 7]);
const num = reactive({
  current: 0,
  tweenedNumber: 0,
});
const getRandomColor = () => {
  return "#" + Math.floor(Math.random() * 16777215).toString(16);
};
let sudoku = ref(
  Array.apply(null, { length: 81 } as number[]).map((_, index) => {
    return {
      id: index,
      number: (index % 9) + 1,
      color: getRandomColor(),
    };
  })
);
const add = () => {
  list.push(list.length + 1);
};

const pop = () => {
  list.pop();
};

const cut = () => {
  // sudoku.value = _.shuffle(sudoku.value);
  sudoku.value = _.shuffle(
    Array.apply(null, { length: 81 } as number[]).map((_, index) => {
      return {
        id: index,
        number: (index % 9) + 1,
        color: getRandomColor(),
      };
    })
  );
};

// 监听一个值
watch(
  () => num.current,
  (newValue, oldValue) => {
    gsap.to(num, {
      duration: 1,
      tweenedNumber: newValue,
    });
  }
);
</script>
<style lang="less" scoped>
.transition {
  height: 600px;
  width: 800px;
  margin: 0 auto;
  margin-top: 50px;
  padding: 30px;
  background: coral;
  .wrap {
    display: flex;
    flex-wrap: wrap;
    word-break: break-all;
    border: 1px solid #ccc;
    .item {
      margin: 10px;
      color: red;
      font-size: 34px;
    }
  }
  .wraps {
    display: flex;
    flex-wrap: wrap;
    word-break: break-all;
    width: calc(25px * 9 + 2px);
    border: 1px solid #ccc;
    ul {
      display: flex;
      flex-wrap: wrap;
      word-break: break-all;
      width: calc(25px * 9 + 2px);
      // border: 1px solid #ccc;
      li.items {
        width: 25px;
        height: 25px;
        border: 1px solid #ccc;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
  .move {
    transition: all 1s;
  }
}
</style>
